var ethan = function(el){
    var obj = '',oJQ = '';
    var id = /#(.*)/;
    if(id.test(el)){
        var name = el.substr(1,el.length);
        obj = document.getElementById(name);
        oJQ = $(el);
    }
    return {
        dialog:function(opt) {
            if(opt){

            }
        }
    }
}

var ethanTimer_alert,ethanTimer_msg;
var ethaner = {
    $alert:function(opt) {
        if(!opt) {
            console.error("请传入配置");
            console.log("配置如下");
            console.table({
                title:"标题",
                msg:"提示信息",
                type:"种类",
                confirm:"确认回调"
            });
            return false;
        }
        clearTimeout(ethanTimer_alert);
        let html = `<div id="ethan-alert" class="ethan-alert">
                        <div class="header">
                            这里是title
                        </div>
                        <div class="content">
                            <div class="icon-box">`;
        switch(opt.type){
            case "warning":
                html +=`<i class="fa fa-exclamation-triangle icon warning"></i>`;
                break;
            case "info":
                html +=`<i class="fa fa-info-circle icon info"></i>`;
                break;
            case "success":
                html +=`<i class="fa fa-check-circle icon success"></i>`;
                break;
            case "danger":
                html +=`<i class="fa fa-exclamation-circle icon danger"></i>`;
                break;
            default:
                html +=`<i class="fa fa-info-circle icon primary"></i>`;
                break;
        }
        html += `</div>
                    <div class="msg">
                        这里是message
                    </div>
                </div>
                <div class="footer text-right">
                    <button class="btn btn-default btn-sm close-btn">取消</button>
                    <button class="btn btn-primary btn-sm confirm-btn">确定</button>
                </div>
            </div>
            <div class="ethan-mask"></div>`;
        $('body').append(html);
        // bind event
        var _this = this;
        $("#ethan-alert").find('.confirm-btn')[0].onclick = function() {
            _this.alertCallback();
            _this.alertClose();
        };
        $("#ethan-alert").find('.close-btn')[0].onclick = function() {
            _this.alertClose();
        };
        $('.ethan-mask')[0].onclick = function() {
            _this.alertClose();
        }
        // load opt
        if(opt.title){
            $("#ethan-alert").find(".header").html(opt.title);
        }
        if(opt.msg){
            $("#ethan-alert").find(".msg").html(opt.msg);
        }
        if(opt.confirm){
            this.alertCallback = opt.confirm;
        }
        // show
        ethanTimer_alert = setTimeout(function(){
            $("#ethan-alert").css({"top":"35%"});
            ethanTimer_alert = setTimeout(function() {
                $("#ethan-alert").css({"top":"30%"});
            },200);
        },1);
    },
    alertClose:function() {
        clearTimeout(ethanTimer_alert);
        $("#ethan-alert").css({"top":"-100%"});
        $('.ethan-mask').remove();
        $('#ethan-alert').remove();
    },
    alertCallback:function() {
        
    },
    $msg:function(opt) {
        if(!opt) {
            console.error("请传入配置");
            console.log("配置如下");
            console.table({
                msg:"Hello World",
                time:1500,
                top:"15vh",
                icon:"fa fa-user",
                type:"success"
            });
            return false;
        }
        clearTimeout(ethanTimer_msg);
        let message = "this is message";
        let time = 3000;
        let type = "info";
        let top = "50%;";
        let icon = "";
        if(opt.msg){
            message = opt.msg;
        }
        if(opt.time){
            time = opt.time;
        }
        if(opt.top){
            top = opt.top;
        }
        if(opt.type){
            type = opt.type;
        }
        if(opt.icon){
            icon = `<i class="`+opt.icon+`"></i> `;
        }
        let html = `<div class="ethan-msg-box `+type+`" style="top:`+top+`;">`;
        html += icon + message+`</div>`;
        let _this = this;
        $('body').append(html);
        $('.ethan-msg-box').css({"opacity":1});
        ethanTimer_msg = setTimeout(function(){
            _this.msgClose();
        },time);
    },
    msgClose:function() {
        clearTimeout(ethanTimer_msg);
        $('.ethan-msg-box').css({"opacity":0});
        ethanTimer_msg = setTimeout(function() {
            $('.ethan-msg-box').remove();
        },300)
    }
}
